const {
  resolve
} = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin'); //解析编译html文件
const miniCssExtractPlugin = require('mini-css-extract-plugin'); //提取css样式文件为单独的文件，减少打包后js代码体积
const {
  loader
} = require('mini-css-extract-plugin');
const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css文件

const commCssLoader = [
  // 'style-loader',//创建style标签，放入样式，就是行内样式
  miniCssExtractPlugin.loader, //取代style-loader 到提取js中css代码为单独文件
  'css-loader', //编译css文件 将css文件整合到js文件中
  /*
  css的兼容性处理：postcss-loader  postcss-preset-env
  帮助 postcss找到package.json中browserslist里面的配置，通过匹配加载指定的css兼容性样式
  */
  { //修改配置 使用postcss-loader默认配置,需要修改配置按照以下去写
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        //postcss的插件
        require('postcss-preset-env')()
      ]
    }
  }
];

// process.env.NODE_ENV = 'development'; //设置nodejs环境变量   node默认是生产环境 这个和下面的mode无关

module.exports = {
  //入口起点
  entry: './src/index.js',
  //输出
  output: {
    publicPath: "/",
    filename: 'js/[name].js', //输出文件名
    path: resolve(__dirname, 'build') //输出路径 __dirname 是node.js 文件变量  代表当前文件目录绝对路径
  },

  // loader的配置，用于对模块的源代码进行转换, 可以使你在 import 或 "load(加载)" 模块时预处理文件
  module: {
    // 详细loader的配置，不同的文件需要配置不同的loader
    rules: [
      //处理css
      {
        test: /\.css$/,
        use: [...commCssLoader]
      },
      //处理less
      {
        test: /\.less$/,
        use: [
          ...commCssLoader,
          'less-loader'
        ]
      },
      // 处理css里面图片：需要安装：url-loader 和 file-loader；问题：默认无法处理html中的img图片
      {
        test: /\.(jpg|png|gif)$/, //处理jpg|png|gif等类型格式的图片
        loader: 'url-loader', //使用一个loader也可以这样写，不要use,直接：loader:'url-loader
        options: {
          limit: 20 * 1024, //8*1024是指图片大小小于8kb,就会被转换base64处理，转换base64优点：减少请求次数，减轻服务器压力，缺点：图片体积会更大
          esModule: false, // 解决：关闭url-loader的es6模块化，使用commonjs解析，否则图片无法正常解析
          name: '[hash:10].[ext]', //给编译后的图片重命名--这个配置不是必要的
          outputPath: 'img' //配置输入到指定目录名称
        }
      },
      //处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
      {
        test: /\.html$/, //需要安装 html-loader
        loader: 'html-loader', //处理html文件中img图片，（负责引入img，从而可以被url-loader进行处理）
        options: {
          esModule: false
        }
      },
      // 处理其他资源，即：除了 js/img/html/css
      {
        // exclude: /\.(css|js|less|html|img|png|scss)$/, //exclude排除法
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'icon'
        }
      },
      //对js兼容性处理 安装插件：cnpm  i babel-loader core-js  @babel/preset-env -D
      {
        test: /\.js$/,
        exclude: /node_modules/, //排除node_modules
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: "entry", //按需加载
                corejs: 3,
                //targets指定兼容性做到那个版本
                targets: {
                  chrome: '60',
                  firefox: '60',
                  safari: '10',
                  ie: '8',
                  edge: "17"
                }
              }
            ]
          ],
          cacheDirectory: true //开启bable缓存
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
  //plugins的配置，里面写所有用到的插件配置
  plugins: [
    // 详细plugins的配置
    /*
    解析编译html需要下载:
    1、执行C安装 html-webpack-plugin,
    2、引入const htmlWebpackPlugin require('html-webpack-plugin');
    3、plugins里面 new htmlWebpackPlugin()；
    作用：html-webpack-plugin功能：默认会创建一个空的HTML文件，自动引入打包输出的所有（JS/CSS)
    */
    new htmlWebpackPlugin({
      template: './src/test.html' //html文件作为模板，自动引入打包输出的所有（JS/CSS)
    }),
    new miniCssExtractPlugin({
      filename: 'css/built.css' //输出文件名 
      // filename: 'css/built.[contenthash:10].css' //[contenthash:10]加哈希值  解决文件缓存后不更新
    }),
    new optimizeCssAssetsWebpackPlugin()
    // new webpack.DllReferencePlugin({ //告诉webpack哪些库不参与打包
    //   context: __dirname,
    //   manifest: resolve(__dirname, 'dll/manifest.json')
    // }),
    // new addAssetHtmlWebpackPlugin({ //将dll已经打包过的文件自动引入
    //   filepath: resolve(__dirname, 'dll/vendors.js')
    // })
  ],
  //环境模式
  mode: 'development',
  // mode: 'production', //默认

  //开发环境配置
  /*
  安装依赖:webpack-dev-server
  开发服务器配置 devServer用来自动化（自动编译，自动打包，自动打开浏览器 自动刷新浏览器）
  启动devServer指令：webpack版本5.0+就执行：webpack serve ；小于5.0就执行：npx webpack-dev-server  
  */
  target: "web",
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true, //启动zip压缩
    port: 6688,
    open: false, //true自动打开默认浏览器 
    hot: true //热模块替换，只更新相应修改过的模块 提高打包速度
  },
  devtool: 'eval-cheap-module-source-map'
}



